<template>
  <div>
    <div class="share-page">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>提货卡管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/pickup-cards-list' }"
          >提货卡列表</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/add-pickup-card' }"
          >新增提货卡</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="monitoring-content">
      <div class="title">新增提货卡</div>
      <el-form
        :rules="rules"
        :inline="true"
        :model="formInline"
        style="width: 100%"
      >
        <div class="search-item">
          <div class="flex-s">
            <el-form-item label="提货卡名称" prop="name">
              <el-input
                v-model="formInline.name"
                placeholder="请输入提货卡名称"
                style="width: 240px"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="提货地址" prop="address">
              <div class="flex-s" style="flex-wrap: nowrap">
                <el-select
                  v-model="formInline.address"
                  placeholder="请选择提货地址"
                >
                  <el-option
                    v-for="i in statusOptions"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value"
                  />
                </el-select>
                <el-input
                  v-model="formInline.detailAddress"
                  placeholder="请输入详细地址：街道/社区/小区/栋"
                >
                </el-input>
              </div>
            </el-form-item>

            <el-form-item label="绑定设备" prop="dev">
              <el-select v-model="formInline.dev" placeholder="请选择绑定设备">
                <el-option
                  v-for="i in devOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="绑定柜机" prop="gj">
              <el-select v-model="formInline.gj" placeholder="请选择绑定柜机">
                <el-option
                  v-for="i in phoneOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="提货时间段" prop="time">
              <el-time-picker
                is-range
                v-model="formInline.time"
                type="datetimerange"
                placeholder="请选择"
                style="width: 240px"
                :suffix-icon="CaretBottom"
              />
            </el-form-item>
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                type="date"
                v-model="formInline.startDate"
                placeholder="请选择开始日期"
                style="width: 440px"
                :suffix-icon="CaretBottom"
              />
            </el-form-item>
            <el-form-item label="截至日期" prop="endDate">
              <el-date-picker
                type="date"
                v-model="formInline.endDate"
                placeholder="请选择开始日期"
                style="width: 440px"
                :suffix-icon="CaretBottom"
              />
            </el-form-item>

            <el-form-item class="phone" label="绑定手机" prop="phone">
              <el-select
                multiple
                v-model="formInline.phone"
                placeholder="请输入绑定手机"
              >
                <el-option
                  v-for="i in phoneOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
              <el-button
                class="add-btn"
                round
                :icon="Plus"
                color="#0071bb"
              ></el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="tables">
        <div class="search">
          <el-form :inline="true" :model="formInline" style="width: 100%">
            <div class="search-item">
              <div class="flex-s">
                <el-button
                  :icon="Plus"
                  round
                  color="#0071bb"
                  @click="showAddGoods = true"
                  >添加商品</el-button
                >
              </div>
            </div>
          </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            v-for="(item, index) in headerArr"
            :key="index"
          >
            <template #default="scope">
              <img
                v-if="item.prop == 'img'"
                class="goods_img"
                :src="scope.row.img"
              />

              <div v-if="['allNum', 'weekNum', 'dayNum'].includes(item.prop)">
                <span v-if="!scope.row[item.prop]">{{
                  scope.row[item.prop]
                }}</span>
                <input
                  v-if="scope.row[item.prop]"
                  type="text"
                  class="input-box"
                  :value="scope.row[item.prop]"
                />
              </div>
              <div v-if="item.prop == 'btn'">
                <el-button size="small" type="danger">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="page_number">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :size="size"
          :disabled="disabled"
          layout="prev, pager, next, jumper,total"
          :total="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <AddGoods
      v-if="showAddGoods"
      @close="onClose()"
      @submit="onSubmit()"
    ></AddGoods>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { ComponentSize } from "element-plus";
import { Plus, CaretBottom } from "@element-plus/icons-vue";
import AddGoods from "./components/addGoods.vue";
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>("small");
const disabled = ref(false);
const showAddGoods = ref(false);
// 修改
const onClose = () => {
  showAddGoods.value = false;
};
// 保存
const onSubmit = () => {
  showAddGoods.value = false;
};
const tableData = [
  {
    index: "1",
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    name: "伯克材料3668649",
    code: "3668649",
    allNum: 100,
    weekNum: 0,
    dayNum: 5,
  },
  {
    index: "2",
    name: "伯克材料3668649",
    code: "——",
    allNum: 100,
    weekNum: 20,
    dayNum: 0,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    index: "3",
    name: "伯克材料3668649",
    code: "——",
    allNum: 100,
    weekNum: 0,
    dayNum: 5,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    index: "4",
    name: "伯克材料3668649",
    code: "——",
    allNum: 100,
    weekNum: 20,
    dayNum: 0,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    index: "5",
    name: "伯克材料3668649",
    code: "——",
    allNum: 100,
    weekNum: 20,
    dayNum: 0,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    index: "6",
    name: "伯克材料3668649",
    code: "——",
    allNum: 100,
    weekNum: 20,
    dayNum: 5,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
  {
    index: "7",
    name: "伯克材料3668649",
    code: "——",
    allNum: 100,
    weekNum: 20,
    dayNum: 5,
    img: "https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
  },
];
const formInline = ref({
  name: "",
  address: "",
  phone: "",
  detailAddress: "",
  startDate: "",
  endDate: "",
  time: "",
  dev: "",
  gj: "",
});
const rules = reactive({
  address: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  dev: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  gj: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  time: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  startDate: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  endDate: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
});
const statusOptions = [
  {
    label: "选项1",
    value: 1,
  },
  {
    label: "选项2",
    value: 2,
  },
];
const devOptions = [
  {
    label: "选项1",
    value: 1,
  },
  {
    label: "选项2",
    value: 2,
  },
];

const phoneOptions = [
  {
    label: "18576859443",
    value: 1,
  },
  {
    label: "15463746338",
    value: 2,
  },
];
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const headerArr = ref<any>([
  { label: "序号", prop: "index", show: true },
  { label: "商品图片", prop: "img", show: true },
  { label: "商品名称", prop: "name", show: true },
  { label: "商品条码", prop: "code", show: true },
  { label: "总订货数量", prop: "allNum", show: true },
  { label: "每周提货数", prop: "weekNum", show: true },
  { label: "每日提货数量", prop: "dayNum", show: true },
  { label: "操作", prop: "btn", show: true, width: "300px" },
]);
</script>
<style lang="scss" scoped>
.el-button--danger {
  background: rgb(255, 0, 0);
}
:deep() {
  .el-form-item.is-required:not(.is-no-asterisk).asterisk-left
    > .el-form-item__label:before {
    color: #4d4d4d !important;
  }
  .add-btn {
    width: 30px !important;
    height: 30px !important;
    margin: 0px 10px;
  }
  .el-table thead th {
    background: #00ffff !important;
    color: #4d4d4d !important;
  }

  .el-select {
    width: 200px;
  }
  .phone {
    .el-select {
      width: 680px;
    }
  }
  .flex-s el-form-item {
    width: 20% !important;
  }
  .el-form--inline .el-form-item {
    margin-right: 10px !important;
  }
  .el-form-item__label {
    font-size: 12px !important;
  }
}

.title {
  color: #4d4d4d;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}
.monitoring-content {
  background: #fff;
  padding: 10px 10px 0px 10px;
}

.search {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  padding: 0 10px;
}
.search-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .btn {
    align-self: right;
  }
  .el-dropdown-link {
    margin-left: 12px;
  }
}
.mx-10 {
  margin: 0px 10px;
}
.flex-s {
  display: flex;
  align-content: center;
  justify-content: start;
  flex-wrap: wrap;
}

.page_number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.tables {
  margin-top: 10px;
}
.input-box {
  width: 60px;
  text-align: center;
  border: 1px solid #ccc;
  color: #706c6c;
}
.goods_img {
  width: 30px;
  height: 50px;
}
</style>
